<!DOCTYPE html>
<html>
<head>
    <title>activiti</title>
    <link rel="shortcut icon" href="<@s.url '/statics/image/favicon.ico'/>">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <#include 'include/common.html'/>
    <link rel="stylesheet" href="<@s.url '/statics/css/index.css'/>"/>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">Activiti Dome</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">导航一</a></li>
            <li class="layui-nav-item"><a href="">导航二</a></li>
            <li class="layui-nav-item"><a href="">导航三</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">多级导航</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item" style="width: 50px">
                <a class="clickable" href="javascript:;" onclick="menuClick(this)" menu-id="personalTask" menu-url="<@s.url '/personal/task.htm'/>" title="我的任务">
                    <i class="layui-icon" style="font-size: 25px;">&#xe611;</i>
                    <#if Session['login_user_key'].taskCount!=0>
                        <span class="layui-badge" style="margin-left:20px">${Session['login_user_key'].taskCount!"0"}</span>
                    </#if>
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    ${Session['login_user_key'].userName!}
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="logout.do">退出</a></li>
        </ul>
    </div>

    <div id="left-menu" class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="left-nav">
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">流程管理</a>
                    <dl class="layui-nav-child">
                        <dd><a class="clickable" href="javascript:;" menu-id="liuchenggl" menu-url="<@s.url '/process/model'/>" title="流程模型">流程模型</a></dd>
                        <dd><a class="clickable" href="javascript:;" menu-id="liuchengdy" menu-url="<@s.url '/process/defintion'/>" title="流程定义">流程定义</a></dd>
                        <dd><a class="clickable" href="javascript:;" menu-id="liuchengsl" menu-url="<@s.url '/process/instance'/>" title="流程实例">流程实例</a></dd>
                        <dd><a class="clickable" href="javascript:;" menu-id="liuchengrw" menu-url="<@s.url '/process/task.htm'/>" title="流程任务">流程任务</a></dd>
                        <dd><a class="clickable" href="javascript:;" menu-id="yonghuzugl" menu-url="<@s.url '/process/group'/>" title="用户组管理">用户组管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">组织架构管理</a>
                    <dl class="layui-nav-child">
                        <dd><a class="clickable" href="javascript:;" menu-id="yonghugl" menu-url="<@s.url '/user'/>" title="用户管理">用户管理</a></dd>
                        <dd><a class="clickable" href="javascript:;" menu-id="zhiweigl" menu-url="<@s.url '/position'/>" title="职位管理">职位管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">个人任务</a>
                    <dl class="layui-nav-child">
                        <dd><a class="clickable" href="javascript:;" menu-id="personalTask" menu-url="<@s.url '/personal/task.htm'/>" title="我的任务">我的任务</a></dd>
                        <dd><a class="clickable" href="javascript:;" menu-id="personalCandidateTask" menu-url="<@s.url '/personal/candidateTask.htm'/>" title="任务认领(签收)">任务认领(签收)</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a class="clickable" href="javascript:;" menu-id="yonghugl" menu-url="<@s.url '/user'/>" title="日志管理">日志管理</a></li>

            </ul>
        </div>
    </div>

    <div id="main-content" class="layui-tab layui-tab-card layui-body" lay-allowClose="true" lay-filter="tab">
        <!-- 内容主体区域 -->
        <ul class="layui-tab-title tab-title">
        </ul>
        <div class="layui-tab-content tab-content">
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © <a target="_blank" href="http://www.luoyi.me">www.luoyi.me</a>
    </div>
</div>
<script type="text/javascript">
    function onTabLoaded(layerIndex) {
        layer.close(layerIndex);
    }
    layui.use(['element','layer'], function(){
        element = layui.element;
        $('#left-menu li a.clickable').on('click',function () {
            var id = $(this).attr('menu-id')
            var frameId='tab-frame-'+id;
            if($('#'+frameId)[0]){
                element.tabChange('tab', id);
                return;
            }
            var title = $(this).attr('title');
            var url = $(this).attr('menu-url');
            var index = layer.load(1, {shade:[0.3]});
            var content = '<iframe id="'+frameId+'" class="tab-iframe" onload="onTabLoaded('+index+')" src="'+url+'" ></iframe>';
            element.tabAdd('tab', {
                title: title
                ,content:content
                ,id: id
            });
            element.tabChange('tab', id);
        });
    });

    function menuClick($this) {
        var id = $($this).attr('menu-id')
        var frameId='tab-frame-'+id;
        if($('#'+frameId)[0]){
            element.tabChange('tab', id);
            return;
        }
        var title = $($this).attr('title');
        var url = $($this).attr('menu-url');
        var index = layer.load(1, {shade:[0.3]});
        var content = '<iframe id="'+frameId+'" class="tab-iframe" onload="onTabLoaded('+index+')" src="'+url+'" ></iframe>';
        element.tabAdd('tab', {
            title: title
            ,content:content
            ,id: id
        });
        element.tabChange('tab', id);
    }

</script>
</body>
</html>
